<template>
    <div class="app-container">
      <!-- <Month /> -->
      <!-- 日历和日报表格切换按钮 -->
      <el-switch v-model="isShowDailyTable" active-text="显示日报日历" inactive-text="显示本月日报表格">
      </el-switch>
  
      <!-- <el-button>{{显示日报日历}}</el-button> -->
      <el-calendar v-model="value" v-show="isShowDailyTable">
        <template slot="dateCell" slot-scope="{date, data}">
          <div style="height: 75%;" :class="data.isSelected ? 'is-selected' : ''" @click="getDaliyContent(data);">
            {{ data.day.split('-').slice(1).join('-').split('-').slice(1).join('-') }}
            {{ isSelected(data.day) ? '✔️' : '' }}
            <div v-if="isShowAddButton(data.day) && parseInt(dateFormat(data.day))==new Date().getDate() "></div>
          </div>
         
        </template>
      </el-calendar>
      <!-- 添加今日工作日报按钮 -->
      <AddDailyForm :refresh="refresh" :AddDailyForm="AddDailyForm" />
      <!-- 本月日报和日历卡片切换按钮 -->
      <!-- <div class="showTable"> -->
        <dailytable v-show="!isShowDailyTable" :dailyDataTable="dailyDataTable" />
    </div>
  </template>
  
  <script>
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import { dailyContent } from "@/api/request";
    import { monthContent, getMonthly } from "@/api/request";
    import Month from "@/components/monthly";
    import AddDailyForm from "@/components/Daily/index.vue";
    import dailytable from "@/components/DailyTable/index"
    export default {
      name: "dailyReport",
      data() {
        return {
          // 点击切换日报表格和日历按钮
          isShowDailyTable: true,
          userId: this.$store.state.user.id,
          day: 19,
          clickMonth: '',
          value: new Date(),
          dialogVisible: false,
          today: "", //当前日期
          daliyContent: "", //接收到的工作日报内容
          dailyDataTable: [],//进入页面请求本月日报信息
          //查询日报参数
          queryParams: {
            //用户名
            username: this.$store.state.user.nickname,
            //年
            year: "",
            //月
            month: "",
            //日
            day: "",
          },
  
          queryDayList: {
            //调用获取本月日报接口参数
            year: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            type: "1 "
          },
          tempDayList: [], //存放日报数据
          dayArr: [], //存放本月填写日报日期
          isShowAdd: false, //是否展示本日添加按钮
          AddDailyForm: {
            title: "日报", //日报标题
            type: "1", //确认是日报
            id: "", //需要传入id
            dailyContent: "", //传入日报内容
            isLeave: false,
            btnName: "按钮",
            time: "",
            isShow: false,
            // isDisable:false
          }
        };
      },
      components: {
        Month,
        AddDailyForm,
        dailytable
      },
      mounted() {
        //  渲染页面时请求本月填写日报的日期
        this.getMonthList(this.queryDayList);
        this.test()
      },
      methods: {
  
  
        test() {
          // console.log('value', this.value)
          let button = document.getElementsByClassName("el-button--plain")[0]
          button.addEventListener('click', () => {
            // console.log('点击了上个月')
            this.queryDayList.month -= 1
            if (this.queryDayList.month === 0) {
              this.queryDayList.month = 12
              this.queryDayList.year -= 1
            }
            // console.log(this.dayArr)
            // this.dayArr=[]
            this.getMonthList(this.queryDayList)
          })
  
          let button2 = document.getElementsByClassName("el-button--plain")[1]
          button2.addEventListener('click', () => {
            this.queryDayList.month = new Date().getMonth() + 1
            this.getMonthList(this.queryDayList)
          })
        },
        
        //请求本月填写日报的日期
        getMonthList(params) {
          monthContent(params).then(res => {
            this.tempDayList = res.data;
            this.tempDayList.forEach(item => {
              var date = item.year + "-" + item.month + "-" + item.day;
              this.dayArr.push(date);
            });
            console.log('获取本月日报信息', res.data)
            this.dailyDataTable = res.data
          });
        },
        refresh() {
          this.getMonthList(this.queryDayList);
          this.isSelected();
        },
        // 传入年月日转成日
        dateFormat(data) {
          return data
            .split("-")
            .slice(1)
            .join("-")
            .split("-")
            .slice(1)
            .join("-");
        },
        //日历当日是否显示添加日报按钮
        isShowAddButton(day) {
          return this.dayArr.indexOf(parseInt(this.dateFormat(day))) === -1;
        },
        //判断是否勾选
        isSelected(date) {
          var isSelect = false;
          let month = parseInt(date.split("-")[1]);
          let day = parseInt(date.split("-")[2]);
          let year = parseInt(date.split("-")[0]);
          date = year + "-" + month + "-" + day;
          for (var i = 0; i < this.dayArr.length; i++) {
            if (date == this.dayArr[i]) {
              isSelect = true;
            }
          }
          return isSelect;
        },
        /*
            默认显示当天内容
          */
        isShow(data) {
          var today = new Date();
          var dd = String(today.getDate()).padStart(2, "0");
          var mm = String(today.getMonth() + 1).padStart(2, "0");
          var yyyy = today.getFullYear();
          today = yyyy + "-" + mm + "-" + dd;
          this.today = today;
          if (this.today == data) {
            return true;
          } else {
            return false;
          }
        },
        /*
          处理日期方法
          将点击日历获取的日期和现在日期进行比较
          在今天和今天的日期之前的日期返回true
          在未来的日期返回false
        */
        handlerTime(data) {
          //鼠标获取的日期
          this.queryParams.year = data.day.split("-")[0];
          this.queryParams.month = parseInt(data.day.split("-")[1]);
          this.queryParams.day = parseInt(data.day.split("-")[2]);
          var choseDay =
            this.queryParams.year +
            "-" +
            this.queryParams.month +
            "-" +
            this.queryParams.day;
          //  当前的日期
          var today = new Date();
          var dd = String(today.getDate()).padStart(2, "0");
          var mm = String(today.getMonth() + 1).padStart(2, "0");
          var yyyy = today.getFullYear();
          today = yyyy + "-" + mm + "-" + dd;
          // console.log('本日日期:',today)
          //日期转数字判断
          var time1 = new Date(choseDay);
          var time2 = new Date(today);
          return time2.getTime() >= time1.getTime();
        },
        /** 点击日历卡片查询日报信息 */
        getDaliyContent(data) {
          this.dialogVisible = true;
          this.daliyContent = "";
          this.clickMonth = parseInt(data.day.split('-')[1])
          // 点击按钮获取当前卡片月份
          console.log("获取到的clickMonth", this.clickMonth)
          // this.getDailyByMonth();
          //假如点击日历的日期是当前日期之前
          if (this.handlerTime(data)) {
            //调用接口
            dailyContent(this.queryParams)
              .then(response => {
                this.centerDialogVisible = true;
                this.AddDailyForm.id = response.data.id;
                this.AddDailyForm.dailyContent = response.data.briefSummary;
                this.AddDailyForm.time = data.day;
                this.AddDailyForm.isShow = true;
              })
              .catch((err) => {
                console.log(err)
                this.AddDailyForm.isShow = true;
                this.AddDailyForm.dailyContent = "";
                this.AddDailyForm.time = data.day;
              });
          } else {
            this.$message.warning("当前日期不可填写")
          }
        }
      }
    };
  </script>
  <style scoped>
     ::v-deep .el-calendar-table:not(.is-range) td.next {
      display: none;
    }
  
    ::v-deep .el-calendar-table:not(.is-range) td.prev {
      visibility: hidden;
    }
  
  
  </style>
  